<style scoped>
.layui-row {
    overflow: hidden;
}

.select-item {
    width: 34.333333%;
    float: right;
}

.layui-row:after,
.layui-row:before {
    clear: none;
}

.layui-row {
    overflow: hidden;
}

.select-item {
    width: 34.333333%;
    float: right;
}

.layui-row:after,
.layui-row:before {
    clear: none;
}
</style>

<template>
<div class="salesSpecification">
    <div>
        <a href="javascript:;" class="layui-btn" @click="add"><i class="layui-icon">&#xe654;</i>添加产品信息</a>
    </div>

    <form class="layui-form ">
        <div class="layui-col-lg4 select-item" style="text-align: right;width: auto">

            <div class="layui-input-inline" style="width: 190px">
                <input type="text" v-model="searchName" placeholder="产品名称/产品描述  " class="layui-input key">
            </div>

             <div class="layui-inline" style="width: 160px">

                <select v-model="category" name="type" id="type" lay-filter="type" placeholder="请选择类型" class="layui-form-select">
                    <option value="">请选择类型</option>
                </select>
            </div>

            <div class="layui-inline" style="width: 160px">

                <select v-model="category" name="category" id="category" lay-filter="category" placeholder="请选择分类" class="layui-form-select">
                    <option value="">请选择分类</option>
                </select>
            </div>
            <div class="layui-inline" style="width: 160px">

                <select v-model="brand" name="brand" id="brand" lay-filter="brand" placeholder="请选择品牌" class="layui-form-select">
                    <option value="">请选择品牌</option>
                </select>
            </div>
            <div class="layui-inline" style="width: 160px">

                <select v-model="products" name="products" id="products" lay-filter="storeroom" placeholder="请选择品种" class="layui-form-select">
                    <option value="">请选择品种</option>
                </select>
            </div>
            <div class="layui-inline" style="width: 160px">
                <select id="status" class="layui-form-select">
                    <option value="">请选择状态</option>
                    <option value="1">正常</option>
                    <option value="2">禁用</option>
                    <option value="3">可销售</option>
                    <option value="4">不可销售</option>
                </select>
            </div>
            <button type="button" class="layui-btn sou" @click="search">搜索</button>
        </div>

    </form>

    <table class="layui-table layui-form">

        <thead>
            <tr>
                <th>编号</th>
                <th>产品类型</th>
                <th>分类</th>
                <th>品牌</th>
                <th>品种</th>
                <th>产品名称</th>
                <th>单位</th>
                <!--                <th>单位</th>-->
                <th>净重</th>
                <th>包装重量</th>
                <th>赠送(%)</th>
                <th>计价方式</th>
                <th>创建人</th>
                <th>创建时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr class="id9" v-for="(val, index) in departments">
                <td>{{val.code}}</td>
                <td>{{val.typename}}</td>
                <td>{{val.categoryname}}</td>
                <td>{{val.brandname}}</td>
                <td>{{val.productinfoname}}</td>
                <td>{{val.name}}</td>
                <td>{{val.unitname}}</td>
                <!--                    <td>{{val.whinunitName}}</td>-->
                <td>{{val.netweight}}</td>
                <td>{{val.packageweight}}</td>
                <td>{{val.concession}}</td>
                <td v-if="val.valuation == ''">

                </td>
                <td v-else-if="val.valuation == '1'">
                    按件
                </td>
                <td v-else-if="val.valuation == '2'">
                    按吨
                </td>
                <td>{{val.operatorname}}</td>
                <td>{{val.createtime}}</td>
                <td v-if="val.status == ''">

                </td>
                <td v-else-if="val.status == '1'">
                    正常
                </td>
                <td v-else-if="val.status == '2'">
                    禁用
                </td>
                <td v-else-if="val.status == '3'">
                    可销售
                </td>
                <td v-else-if="val.status == '4'">
                    不可销售
                </td>
                <td v-if="val.status == '1'">
                    <a href="javascript:;" @click="edit(val.guid)">修改</a> |
                    <!-- <a v-if="val.status == '1'" href="javascript:;" @click="del(val)">禁用</a> -->
                    <a href="javascript:;" @click="del(val,2)">禁用</a>
                    <a href="javascript:;" @click="del(val,3)">启用(可销售)</a>
                    <a href="javascript:;" @click="del(val,4)">启用(不销售)</a>
                </td>
                <td v-if="val.status == '2'">
                    <a href="javascript:;" @click="edit(val.guid)">修改</a> |
                    <a href="javascript:;" @click="del(val,1)">启用</a> |
                    <a href="javascript:;" @click="del(val,3)">启用(可销售)</a>
                    <a href="javascript:;" @click="del(val,4)">启用(不销售)</a>
                </td>
                <td v-if="val.status == '3'">
                    <a href="javascript:;" @click="edit(val.guid)">修改</a> |
                    <a href="javascript:;" @click="del(val,1)">启用</a> |
                    <a href="javascript:;" @click="del(val,2)">禁用</a>
                    <!-- <a v-if="val.status == '2'" href="javascript:;" @click="del(val)">启用</a> -->
                    <a href="javascript:;" @click="del(val,4)">启用(不销售)</a>
                </td>
                <td v-if="val.status == '4'">
                    <a href="javascript:;" @click="edit(val.guid)">修改</a> |
                    <a href="javascript:;" @click="del(val,1)">启用</a> |
                    <a href="javascript:;" @click="del(val,2)">禁用</a>
                    <a href="javascript:;" @click="del(val,3)">启用(可销售)</a>
                </td>
            </tr>
        </tbody>
    </table>

    <Pagination :cur="currentPage" :all="totalPage" :callback="turnPage"></Pagination>
    <div style="height: 200px"></div>
</div>
</template>

<script>
import Pagination from '../common/Pagination.vue'
export default {
    name: 'SalesSpecification',
    components: {
        Pagination
    },
    data() {
        return {
            departments: [],
            currentPage: 1,
            totalPage: 0,
            searchName: '',
            products: '',
            category: '',
            brand: '',
            name: ''
        }
    },
    mounted() {
        let that = this;
        layui.use(['form'], function () {
            var form = layui.form,
                layer = layui.layer;
            that.getPageData();
            that.getBaseInfo();
        });

    },
    methods: {
        search: function () {
            this.getPageData('search');
        },
        turnPage: function (data) {
            this.currentPage = data;
            this.getPageData();
        },
        getPageData: function (type = '') {
            let that = this;
            let loader = layui.layer.load();

            let postData = {};
            if (type != 'search') {
                postData.page = that.currentPage;
            } else {
                postData.page = 1;
            }
            postData.searchName = that.searchName;
            that.products = $('#products').val();
            postData.productGuid = that.products;
            that.category = $('#category').val();
            postData.category = that.category;
            that.brand = $('#brand').val();
            postData.brandid = that.brand;
            postData.stat = $('#status').val();
            that.type = $('#type').val();
            postData.type = that.type;

            $.ajax({
                url: '/sales/Salesspecification!list.action',
                type: "post",
                data: postData,
                dataType: "json",
                success: function (res) {
                    if (res.info != undefined && res.info.rows != undefined) {
                        //分页数据赋值
                        // that.currentPage = res.info.indexPage;
                        that.totalPage = res.info.pageCount;

                        that.departments = res.info.rows;
                    } else {

                        that.alert("系统错误");
                    }
                },
                complete: function () {
                    layer.close(loader);
                }
            });
        },
        add: function () {
            this.$parent.switchPage('addSalesSpecification');
        },
        edit: function (id) {
            this.$parent.gid = id;
            this.$parent.switchPage('editSalesSpecification');
        },
        del: function (val, index) {
            let that = this;
            if (index == 1) {
                this.name = "启用"

            } else if (index == 2) {
                this.name = "禁用"

            } else if (index == 3) {
                this.name = "启用(可销售)"
            } else if (index == 4) {
                this.name = "启用(不可销售)"
            }
            layer.confirm('确定要' + this.name + '该数据', function () {
                let loader = layer.load();
                if (index == 1) {
                    val.status = 1
                } else if (index == 2) {
                    val.status = 2
                } else if (index == 3) {
                    val.status = 3
                } else if (index == 4) {
                    val.status = 4
                }
                let params = {
                    guid: val.guid,
                    status: val.status
                }
                $.ajax({
                    url: '/sales/Salesspecification!del.action',
                    type: "post",
                    data: params,
                    dataType: "json",
                    success: function (res) {
                        if (res.info == "ok") {
                            that.toast("操作成功");
                            console.log(that);
                            that.getPageData();
                        } else {
                            that.toast("系统错误");
                        }
                    },
                    complete: function () {
                        layer.close(loader);
                    }
                });
            })
        },
        getBaseInfo: function (type = '') {
            $.ajax({
                url: '/sales/Salesspecification!getBaseInfo.action',
                type: "post",
                dataType: "json",
                success: function (res) {
                    if (res.msg == "scucess") {
                        $.each(res.categorys, function (index, item) {

                            $('#category').append(new Option(item.name, item.guid));
                        });
                        layui.form.render("select");
                        $.each(res.brands, function (index, item) {

                            $('#brand').append(new Option(item.name, item.guid));
                        });
                        layui.form.render("select");
                        $.each(res.products, function (index, item) {

                            $('#products').append(new Option(item.productname, item.guid));
                        });
                        $.each(res.dicts, function (index, item) {

                            $('#type').append(new Option(item.dicttext, item.dictkey));
                        });
                        layui.form.render("select");
                    } else {
                        alert("系统错误");
                    }
                }
            });
        }
    }
}
</script>
